$duration: .3s;
$ease-in-out-circ: cubic-bezier(0.78, 0.14, 0.15, 0.86);
$ease-out-back: cubic-bezier(0.18, 0.89, 0.32, 1.28);
/* 一般状态 */
.radio-wrapper {
  cursor: pointer;
  margin-right: 8px;

  .radio-name {
    padding-left: 8px;
    padding-right: 8px;
  }

  .radio-box {
    white-space: nowrap;
    outline: none;
    display: inline-block;
    position: relative;

    &:hover {
      .radio-box-inner {
        border-color: $primary-color;
      }
    }

    &-inner {
      &:after {
        position: absolute;
        width: 6px;
        height: 6px;
        left: 3px;
        top: 3px;
        border-radius: 6px;
        display: table;
        border-top: 0;
        border-left: 0;
        content: ' ';
        background-color: $primary-color;
        transform: scale(0);
        -webkit-transform: scale(0);
        opacity: 0;
        transition: transform $duration $ease-in-out-circ,opacity $duration $ease-in-out-circ,background-color $duration $ease-in-out-circ;
      }
      position: relative;
      top: 3px;
      left: 0;
      display: inline-block;
      width: 14px;
      height: 14px;
      border-radius: 14px;
      border: 1px solid #b4b4b4;
      background-color: #fff;
      transition: border-color $duration $ease-in-out-circ, background-color $duration $ease-in-out-circ;
    }

    &-input {
      position: absolute;
      left: 0;
      z-index: 9999;
      cursor: pointer;
      opacity: 0;
      top: 0;
      bottom: 0;
      right: 0;
    }
  }
  /* 选中状态 */
  .radio-checked {
    .radio-box-inner {
      border-color: $primary-color;

      &:after {
        transform: scale(1);
        opacity: 1;
        transition: transform $duration $ease-out-back,opacity $duration $ease-in-out-circ,background-color $duration $ease-in-out-circ;
      }
    }
  }

  .radio-disabled {
    .radio-box-inner {
      background-color: #eaeaea;
    }

    &:hover {
      .radio-box-inner {
        border-color: #b4b4b4;
      }
    }
  }
}
